<template>
  <el-dialog title="合同详情" :visible.sync="open" width="1000px" append-to-body v-dialogDrag
             :close-on-click-modal="false" @close="closeDialog">
    <el-form ref="form" :model="form" label-width="110px" :key="formKey">
      <el-card shadow="never" :body-style="{ height: '10px' }" style="margin-bottom: 10px">
        <el-descriptions title="合同主体信息"/>
        <el-row>
          <el-col :span="12">
            <el-form-item label="投保人名称" prop="toubaoName">
              <el-input v-model="form.toubaoName" placeholder="" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="被保险人名称" prop="beibaoName">
              <el-input v-model="form.beibaoName" placeholder="" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="保险人名称" prop="baoxianId">
              <el-input v-model="form.baoxianName" placeholder="" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="经纪/代理公司名称" prop="proxyId">
              <el-input v-model="form.proxyName" placeholder="" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card shadow="never" :body-style="{ padding: '10px'}" style="margin-bottom: 10px">
        <el-descriptions title="保单信息"/>
        <el-form-item label="保单号码" prop="insureNo">
          <el-input v-model="form.insureNo" placeholder="" disabled/>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="保险合同名称" prop="contractName">
              <el-input v-model="form.contractName" placeholder="" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="险种" prop="insureType">
              <el-select v-model="form.insureType" placeholder="险种" clearable disabled>
                <el-option
                    v-for="dict in dict.type.insure_type"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="保单期限" prop="insureLimit">
              <el-date-picker clearable
                              disabled
                              v-model="form.insureLimit"
                              type="month"
                              style="width: 100%"
                              value-format="yyyy-MM"
                              placeholder="请选择保单期限">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="保单起期" prop="insureStartDate">
              <el-date-picker clearable
                              disabled
                              v-model="form.insureStartDate"
                              type="date"
                              value-format="yyyy-MM-dd"
                              format="yyyy-MM-dd"
                              placeholder="请选择保单起期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="保单止期" prop="insureEndDate">
              <el-date-picker clearable
                              v-model="form.insureEndDate"
                              type="date"
                              disabled
                              value-format="yyyy-MM-dd"
                              format="yyyy-MM-dd"
                              placeholder="请选择保单止期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="保险金额" prop="insureAmount">
              <el-input v-model="form.insureAmount" placeholder="请输入保险金额" disabled>
                <template slot="append">
                  <el-button slot="append">元</el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="保险费率" prop="insureRate">
              <el-input v-model="form.insureRate" placeholder="请输入保险费率" disabled>
                <template slot="append">
                  <el-button slot="append">%</el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="保费" prop="premium">
              <el-input v-model="form.premium" disabled placeholder="保费">
                <template slot="append">
                  <el-button slot="append">元</el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card shadow="never" :body-style="{ padding: '10px'}" style="margin-bottom: 10px">
        <el-descriptions title="标的信息"/>
        <el-row>
          <el-col :span="12">
            <el-form-item label="标的地址" prop="targetAddress">
              <el-input v-model="form.targetAddress" disabled placeholder="请输入标的地址">
                <template slot="append">
                  <el-button slot="append" @click="openMap"> 地图</el-button>
                </template>
              </el-input>
            </el-form-item>

          </el-col>
          <el-col :span="12">
            <el-form-item label="标的内容">
              <el-input v-model="form.targetContent" disabled placeholder="请输入标的地址" type="textarea" :rows="1"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card shadow="never" :body-style="{ padding: '10px'}" style="margin-bottom: 10px">
        <el-descriptions title="经纪/代理信息"/>
        <el-row>
          <el-col :span="12">
            <el-form-item label="经纪/代理公司" prop="proxyId" label-width="110px">
              <el-select v-model="form.proxyName" placeholder="请选择经纪/代理公司名称" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="经纪/代理佣金比例" prop="commissionRate">
              <el-input v-model="form.commissionRate" placeholder="请输入经纪/代理佣金比例" disabled>
                <template slot="append">
                  <el-button slot="append">%</el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="经纪/代理佣金" prop="commission">
              <el-input v-model="form.commission" placeholder="请输入经纪/代理佣金" disabled>
                <template slot="append">
                  <el-button slot="append">元</el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <!--<el-col :span="12">-->
          <!--  <el-form-item label="经纪/代理佣金支付证明上传" prop="fileIds">-->
          <!--    <file-upload v-model="form.fileIds" :limit="1" ></file-upload>-->
          <!--  </el-form-item>-->
          <!--</el-col>-->
        </el-row>
      </el-card>
      <el-card shadow="never" :body-style="{ padding: '10px'}" style="margin-bottom: 10px">
        <el-descriptions title="保费缴纳信息"/>
        <el-collapse>
          <el-collapse-item title="回款计划" name="1">
            <el-table :data="planList" :max-height="300">
              <el-table-column label="批次名称" align="center" prop="planName"/>
              <el-table-column label="计划回款金额(元)" align="center" prop="planAmount"/>
              <el-table-column label="计划回款时间" align="center" prop="planDate" width="180">
                <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.planDate, '{y}-{m}-{d}') }}</span>
                </template>
              </el-table-column>
              <el-table-column label="回款比例(%)" align="center" prop="rate"/>
              <el-table-column label="所需资源" align="center" prop="demand"/>
              <el-table-column label="回款责任人" align="center" prop="responsiblePerson"/>
            </el-table>
          </el-collapse-item>
          <el-collapse-item title="实际回款" name="2">
            <el-table :data="realList"
                      :max-height="300">
              <!--<el-table-column type="selection" width="55" align="center"/>-->
              <el-table-column label="批次名称" align="center" prop="realName"/>
              <el-table-column label="实际回款金额(元)" align="center" prop="realAmount"/>
              <el-table-column label="实际回款时间" align="center" prop="realDate" width="180">
                <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.realDate, '{y}-{m}-{d}') }}</span>
                </template>
              </el-table-column>
              <el-table-column label="回款比例(%)" align="center" prop="rate"/>
              <el-table-column label="回款责任人" align="center" prop="responsiblePerson"/>
            </el-table>
          </el-collapse-item>
        </el-collapse>
      </el-card>
      <el-card shadow="never" :body-style="{ padding: '10px'}" style="margin-bottom: 10px">
        <el-descriptions title="经纪/代理佣金支付信息"/>
        <el-collapse>
          <el-collapse-item title="回款计划" name="1">
            <el-table :data="planListProxy" >
              <el-table-column label="批次名称" align="center" prop="planName"/>
              <el-table-column label="计划回款金额(元)" align="center" prop="planAmount"/>
              <el-table-column label="计划回款时间" align="center" prop="planDate" width="180">
                <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.planDate, '{y}-{m}-{d}') }}</span>
                </template>
              </el-table-column>
              <el-table-column label="支付比例(%)" align="center" prop="rate"/>
              <el-table-column label="支付责任人" align="center" prop="responsiblePerson"/>
            </el-table>
          </el-collapse-item>
          <el-collapse-item title="实际回款" name="2">
            <el-table :data="realListProxy">
              <el-table-column label="批次名称" align="center" prop="realName"/>
              <el-table-column label="实际支付金额(元)" align="center" prop="realAmount"/>
              <el-table-column label="实际支付时间" align="center" prop="realDate" width="180">
                <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.realDate, '{y}-{m}-{d}') }}</span>
                </template>
              </el-table-column>
              <el-table-column label="支付比例(%)" align="center" prop="rate"/>
              <el-table-column label="支付责任人" align="center" prop="responsiblePerson"/>
            </el-table>
          </el-collapse-item>
        </el-collapse>
      </el-card>
      <el-card shadow="never" :body-style="{ padding: '10px'}" style="margin-bottom: 10px">
        <el-descriptions title="共保信息"/>
        <el-collapse>
          <el-collapse-item title="共保信息" name="1">
            <el-table :data="coinsuranceList">
              <el-table-column label="共保人名称" align="center" prop="baoxianName" />
              <el-table-column label="承保比例" align="center" prop="rate" />
              <el-table-column label="项目负责人" align="center" prop="responsiblePerson" />
              <el-table-column label="联系方式" align="center" prop="tel" />
            </el-table>
          </el-collapse-item>
        </el-collapse>
      </el-card>

      <el-card shadow="never" :body-style="{ padding: '10px'}" style="margin-bottom: 10px">
        <el-descriptions title="附件"/>
        <el-collapse>
          <el-collapse-item title="附件"  name="1">
        <el-table  :data="form.attachmentList" :max-height="200">
          <el-table-column label="文件名称" align="center" prop="fileName">
            <template slot-scope="scope">
              <el-link type="primary" :href="`${baseUrl}/${scope.row.filePath}`" :underline="false" target="_blank">
                {{ scope.row.fileName }}
              </el-link>
            </template>
          </el-table-column>
          <el-table-column label="上传人" align="center" prop="createBy">
            <template slot-scope="scope">
              {{ scope.row.id ? scope.row.createBy : scope.row.userName }}
            </template>
          </el-table-column>
          <el-table-column label="上传时间" align="center" prop="uploadDate" width="180">
            <template slot-scope="scope">
                <span>{{
                    parseTime(scope.row.id ? scope.row.uploadTime : scope.row.uploadDate, '{y}-{m}-{d} {h}:{m}:{s}')
                  }}</span>
            </template>
          </el-table-column>
          <el-table-column label="文件类型" align="center" prop="fileType"/>
          <!--<el-table-column label="文件大小" align="center" prop="fileSize"/>-->
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-view"
                  @click="handleView(scope.row)"
              >预览
              </el-button>
            </template>
          </el-table-column>
        </el-table>
          </el-collapse-item>
        </el-collapse>
      </el-card>
    </el-form>
  </el-dialog>
</template>
<script>
import {
  getContractCoinsuranceList,
  getContractDetail,
  getContractPay,
  getContractPremium
} from "@/api/insurance/contract";

export default {
  name: "contractDetail",
  dicts: ['insure_type'],
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      formKey: Math.random() * 100,
      form: {},
      planList: [],
      planListProxy: [],
      realList: [],
      coinsuranceList: [],
      realListProxy: [],
      open: false,
    }
  },
  methods: {
    openDialog(id) {
      this.formKey = Math.random() * 100
      this.open = true
      getContractDetail(id).then(response => {
        this.form = response.data
      })
      getContractPremium(id).then(response => {
        this.planList = response.data.premiumPlanList
        this.realList = response.data.premiumRealList
      })
      getContractPay(id).then(response => {
        this.planListProxy = response.data.commissionPlanList
        this.realListProxy = response.data.commissionRealList
      })
      getContractCoinsuranceList(id).then(response => {
        this.coinsuranceList = response.data
      })
    },
    closeDialog() {
      this.$emit('closeDialog')
    },
    openMap() {
    }  ,
    handleView(row) {
      window.open(this.baseUrl+"/"+row.filePath, '_blank')
    },
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-input.is-disabled .el-input__inner {
  color: #050608;
  background-color: #fff;
}

::v-deep .el-textarea.is-disabled .el-textarea__inner {
  color: #050608;
  background-color: #fff;
}

::v-deep .el-descriptions {
  &:not(:nth-child(1)) {
    margin-top: 20px;
  }

  .el-descriptions__title {
    display: flex;
    align-items: center;

    &::before {
      display: inline-block;
      width: 3px;
      height: 20px;
      margin-right: 10px;
      background-color: #409eff;
      content: '';
    }
  }

  .el-descriptions-item__container {
    margin: 0 10px;

    .no-colon {
      margin: 0;

      &::after {
        content: '';
      }
    }
  }
}
</style>
